﻿@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

@section Scripts {
    <script src="~/js/PostImages.js"></script>
}

<style>
    ul {
        list-style-type: none;
        text-align: center;
    }

        ul img {
            /*margin-top: 20px;*/
            padding: 10px;
        }

            ul img.active {
                border: 1px solid #ddd;
            }

    #result {
        height: 400px;
    }

    #resultImagediv {
        align-content: center;
        margin-top : 20px;
    }

    #headerDiv {
        color: blue;
        text-align: center;
    }

    #processedImageDiv {
        color: blue;
        text-align: center;
    }

    #inputImageDiv {
        color: blue;
        text-align: center;
    }
</style>

<div id="headerDiv"><h2>Object Detection</h2></div>

<div class="container">
    <div class="row">
        <div id="processedImageDiv" class="col-sm-6"><b>Processed Image</b></div>
        <div id="inputImageDiv" class="col-sm-6"><b>Input Images</b></div>
    </div>
    <div class="row">
        <div id="resultImagediv" class="col-sm-6">
            <img id="result" />
        </div>
        <div class="col-sm-6" id="imDiv">
            <ul id="imagesUL"></ul>
            <ul>
                <li><img class="input-image" src="~/ImagesList/image1.jpg" alt="Sample Photo" height="100" width="100" /></li>
                <li><img class="input-image" src="~/ImagesList/image2.jpg" alt="Sample Photo" height="100" width="100" /></li>
                <li><img class="input-image" src="~/ImagesList/image3.jpg" alt="Sample Photo" height="100" width="100" /></li>
                <li><img class="input-image" src="~/ImagesList/image4.jpg" alt="Sample Photo" height="100" width="100" /></li>
            </ul>
        </div>
    </div>
</div>

<div class="container">
    <form method="post" enctype="multipart/form-data">
        <br />
        <div>
            <h5 style="color:blue">Try uploading your own images:</h5>
        </div>
        <br />
        <div>
            <input type="file" name="imageFile">
            <input type="submit" value="Upload File" name="submit" class="btn btn-primary">
        </div>
    </form>
    <br />
    <br />
</div>







